@charset "UTF-8";
/* 头部开始 */
body {
  background: #f4f4f4; }

.wrapper {
  position: relative;
  width: 100%;
  height: 670px;
  overflow: hidden; }

.bg-white {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  height: 260px;
  background-color: #fff; }

.header {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 82px;
  margin: 0 auto; }

.header .logo {
  width: 125px;
  height: 24px;
  float: left;
  padding-top: 28px; }

.nav {
  float: right; }

.nav-item {
  float: left;
  position: relative; }

.nav-item a {
  display: block;
  line-height: 21px;
  font-size: 14px;
  transition: color .1s linear;
  padding: 31px 20px 20px;
  color: #fff;
  cursor: pointer; }

.nav-item a:hover {
  color: lightblue; }

.header-search {
  position: relative;
  float: right;
  margin: 26px 5px 0 10px;
  width: 170px;
  height: 30px;
  line-height: 29px;
  font-size: 12px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #999;
  box-sizing: border-box; }

.header-search input {
  display: block;
  border: none;
  outline: 0;
  width: 127px;
  height: 20px;
  margin-left: 15px;
  margin-top: 5px;
  transition: width .5s;
  font-size: 12px;
  line-height: 20px;
  color: #333;
  background: transparent;
  box-sizing: content-box;
  outline-offset: 0; }

.header-search a {
  position: absolute;
  right: 0;
  bottom: 0;
  background-position: 50%;
  cursor: pointer;
  color: #515151;
  line-height: 29px;
  font-size: 17px;
  display: block;
  margin: 7px 5px 0 auto; }

.header-cart {
  position: relative;
  float: right;
  margin: 27px 0 0 8px;
  text-align: center;
  font-size: 24px;
  color: #fff; }

.header-cart em {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c00;
  color: #fff;
  font-size: 6px;
  line-height: 10px;
  text-align: center;
  display: inline-block; }

.header-user {
  position: relative;
  float: right;
  display: block;
  font-size: 24px;
  color: #fff;
  margin: 27px 0 0 8px;
  cursor: pointer; }
  .header-user img {
    width: 24px;
    height: 24px;
    border-radius: 50%; }

.header-user ul {
  display: none;
  position: absolute;
  z-index: 1;
  right: 0;
  width: 98px;
  background-color: #fff;
  top: 40px;
  left: 50%;
  border-radius: 2px;
  box-sizing: border-box;
  text-align: center;
  padding: 15px 0;
  margin-left: -48px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }

.header-user ul li a {
  color: #515151;
  padding-top: 5px;
  font-size: 12px; }

.header-user ul li a:hover {
  color: lightblue; }

.header-user ul span {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 40px;
  top: -5px;
  transform: rotateZ(45deg);
  background: #fff; }

/* 小导航开始 */
.sub-nav {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 82px;
  z-index: 999;
  width: 100%;
  display: none;
  background: #fff; }

.sub-nav_wrap {
  height: 185px;
  display: none; }

.sub-nav_wrap[data-link="nav-phone"] {
  padding-left: 80px; }

.sub-nav_wrap[data-link="nav-acoustics"] {
  padding-left: 80px; }

.sub-nav_wrap[data-link="nav-parts"] {
  padding-left: 280px; }

.sub-nav_wrap[data-link="nav-life"] {
  padding-left: 280px; }

.sub-nav a {
  float: left;
  width: 142px;
  height: 155px;
  text-align: center;
  padding-top: 5px; }

.sub-nav a:hover {
  color: #333; }

.sub-nav a img {
  display: inline-block;
  width: 120px; }

.sub-nav a span {
  display: block;
  font-size: 12px; }

.sub-nav_wrap .app {
  width: 100%;
  height: 300px; }

.sub-nav_wrap .app img {
  width: 100%;
  height: 300px; }

.sub-nav_wrap:last-child {
  height: 305px; }

/* 小导航结束 */
/* 头部结束 */
/* 轮播图开始 */
.box {
  width: 100%;
  height: 670px;
  position: relative; }

.item img {
  width: 100%;
  height: 670px;
  position: absolute;
  display: none; }

.item img:nth-child(1) {
  display: block; }

.pointers {
  position: absolute;
  z-index: 999;
  width: 500px;
  padding: 0 10px;
  height: 25px;
  left: 50%;
  margin-left: -250px;
  bottom: 20px;
  display: flex;
  justify-content: center; }

.little {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  margin: 5px 8px;
  cursor: pointer; }

.littleActive {
  width: 9px;
  height: 9px;
  background-color: transparent;
  border: 1px solid #fff; }

/* 轮播图结束 */
/* 广告开始 */
.adv {
  width: 100%;
  height: 275px;
  background: #fff; }

.adv li {
  float: left;
  width: 310px;
  height: 186px;
  padding-top: 45px; }

.adv li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center; }

.adv li a img {
  width: 130px;
  height: 130px; }

.adv li a span {
  font-size: 20px;
  display: block;
  color: #333; }

.adv li a p {
  font-size: 14px;
  color: #999; }

/* 广告结束 */
footer {
  width: 100%;
  height: 250px;
  background-color: #fff; }
  footer .footer-warp {
    width: 100%;
    height: 178px;
    padding-top: 48px; }
    footer .footer-warp hr {
      width: 100%;
      margin: 10px 0 28px 0;
      display: block;
      color: #eee; }

.font-bg, .footer-row .footer-service li a span, .onlive-server span, .footer-info ul li a, .footer-info .certificate, .footer-info .certificate a {
  color: #999;
  font-size: 12px;
  line-height: 30px; }

.footer-row {
  width: 100%;
  height: 85px; }
  .footer-row .footer-service li {
    float: left;
    width: 150px;
    height: 68px; }
    .footer-row .footer-service li a {
      width: 100%;
      height: 100%;
      cursor: pointer;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center; }
      .footer-row .footer-service li a img {
        width: 50px;
        height: 39px;
        margin: 0 auto; }

.onlive-server {
  float: right;
  width: 158px;
  height: 102px;
  margin-top: -30px; }
  .onlive-server span {
    float: right; }
  .onlive-server p {
    color: #00c3f5;
    font-size: 23px;
    font-weight: 400;
    line-height: 40px; }
  .onlive-server a {
    display: block;
    width: 88px;
    height: 30px;
    font-size: 14px;
    background: #0bbbef;
    color: #fff;
    border-radius: 20px;
    line-height: 30px;
    margin-top: 3px;
    text-align: center;
    float: right; }

.footer-info {
  float: left; }
  .footer-info ul {
    width: 1000px;
    height: 18px; }
  .footer-info ul li {
    float: left;
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid #999;
    height: 18px;
    cursor: pointer; }
    .footer-info ul li a {
      line-height: 18px;
      display: block; }
    .footer-info ul li a:hover {
      color: #00c3f5; }
  .footer-info li:last-child {
    border: none; }
  .footer-info .language {
    color: #999;
    font-size: 12px;
    line-height: 18px;
    position: relative; }
    .footer-info .language img {
      width: 18px;
      height: 18px; }
    .footer-info .language ul {
      width: 115px;
      height: auto;
      background: #fff;
      border: 1px solid #f1f1f1;
      z-index: 999;
      position: absolute;
      left: -12px;
      top: -190px;
      display: none;
      padding-bottom: 3px; }
      .footer-info .language ul li {
        float: none;
        border: none;
        width: 80px;
        height: 35px;
        padding: 2px 4px 0 10px;
        color: #999; }
      .footer-info .language ul li:hover {
        color: #333; }
  .footer-info .certificate {
    float: left;
    padding-top: 8px; }
    .footer-info .certificate a {
      margin: 0 3px; }
    .footer-info .certificate a:hover {
      color: #00c3f5; }

.subsrcibe {
  position: relative;
  float: right;
  width: 160px;
  height: 30px;
  margin-top: 25px; }
  .subsrcibe a {
    margin-right: 20px;
    color: #999; }
  .subsrcibe a:hover {
    color: limegreen; }
  .subsrcibe img {
    position: absolute;
    width: 180px;
    height: 180px;
    left: -18px;
    top: -180px; }
